<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useCommonStore } from '@/stores/common';
import OButton from './OButton.vue';

import SearchIcon from '~icons/app/search.svg';
import XIcon from '~icons/app/x.svg';
import IconDelete from '~icons/app/icon-delete.svg';

const useCommon = useCommonStore();
const { t } = useI18n();
const emits = defineEmits(['search-click', 'clear-search']);

const searchInput = ref(useCommon.search || '');
const isResult = ref(false);
const handerSearchInput = () => {
  useCommon.search = searchInput.value;
  localStorage.setItem('lookeng-search', searchInput.value);

  // isResult.value = searchInput.value !== '' ? true : false;
};

const handerSearchChange = () => {
  emits('search-click', searchInput.value);
};

const clearSearch = () => {
  emits('clear-search', true);
  searchInput.value = '';
  useCommon.search = searchInput.value;
  localStorage.setItem('lookeng-search', searchInput.value);
};

// 清除历史记录
// const clearHistory = () => {
//   useCommon.searchHistory = [];
// };
</script>

<template>
  <div class="header-search">
    <div class="header-search-box">
      <o-icon class="icon"><search-icon></search-icon></o-icon>
      <input
        type="text"
        v-model="searchInput"
        :placeholder="t('nav.search_placeholder')"
        @input="handerSearchInput"
        @keydown.enter="handerSearchChange"
        class="search-input"
      />
      <o-icon class="clear-icon icon" @click="clearSearch"
        ><x-icon></x-icon
      ></o-icon>
    </div>
    <div class="header-search-result" v-show="isResult">
      <!-- <div class="history-head">
        <p class="title">历史记录</p>
        <o-button type="text" placement="left"
          >清除
          <template #left>
            <o-icon class="remove icon" @click="clearHistory">
              <icon-delete></icon-delete>
            </o-icon>
          </template>
        </o-button>
      </div>
      <ul>
        <li v-for="item in searchHistoryList" :key="item">
          <a href="">{{ item }}</a>
        </li>
      </ul> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-search {
  position: relative;
  &-box {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--theme-cross-line);
    padding-bottom: 10px;
    .search-input {
      outline: none;
      border: 0 none;
      line-height: 24px;
      height: 24px;
      flex: 1;
      font-size: 14px;
      padding: 0 10px;
      color: var(--theme-title);
      background: var(--theme-card-bg);
    }
    .clear-icon {
      cursor: pointer;
    }
  }
  &-result {
    background: rgba(var(--theme-white-rgb), 0.9);
    box-shadow: 0px 3px 8px 0px rgba(var(--theme-black-rgb), 0.05);
    backdrop-filter: blur(5px);
    padding: 24px 32px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    top: 35px;
    .history-head {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 14px;
      }
      .remove {
        font-size: 18px;
      }
    }
  }
}
</style>
